<template>
    <div class="HomeNav">
        <a class="leftImg">
            <div class="block">
                <el-image :src="src"></el-image>
            </div>
        </a>
        <div class="rightSearch">
            <el-input placeholder="请输入内容" v-model="input" class="input-with-select">
                <el-button slot="append" icon="el-icon-search">搜索</el-button>
            </el-input>
            <div class="link">
                <el-link :underline="false" v-for="item in arr" :key="item">{{item}}</el-link>
            </div>
        </div>
        <div class="tabNav">
            <!-- :router="true" --> 
            <el-menu :default-active="index" class="el-menu-demo" mode="horizontal" @select="handleSelect">
                <el-menu-item index="1">
                    <router-link to="/">首页</router-link>
                </el-menu-item>
                <template v-if="isShow">
                    <el-menu-item index="8">
                        <router-link to="/cart">我的购物车</router-link>
                    </el-menu-item>
                    <el-menu-item index="5">
                        <a href="#" @click.prevent="tui">退出登录</a>
                    </el-menu-item>
                </template>
                <template v-else>
                    <el-menu-item index="2">
                        <router-link to="/login">登录</router-link>
                    </el-menu-item>
                    <el-menu-item index="3">
                        <router-link to="/register">注册</router-link>
                    </el-menu-item>
                </template>
            </el-menu>
        </div>

    </div>
</template>

<script>
export default {
    props: {
        index: String,
    },
    data() {
        return {
            fits: ["fill"],
            src: require("../../assets/title.png"),
            input: "",
            arr: [
                "眼睛",
                "防嗮衣女",
                "洗发水",
                "电动牙刷",
                "防晒霜",
                "面膜",
                "枕头",
                "防晒",
                "眼霜",
                "精华",
            ],
            isShow: false,
        };
    },
    created() {
        // console.log(localStorage.token);
        if (localStorage.token) {
            this.isShow = true;
        }
    },
    mounted() {
        window.addEventListener("scroll", this.handerScroll);
    },
    methods: {
        handerScroll() {
            // console.log(111);
            // let scrollTop=document.documentElement.scrollTop||document.body.scrollTop
            // console.log(scrollTop);
        },
        handleSelect(key, keyPath) {
            console.log(key, keyPath);
        },
        tui() {
            localStorage.token = "";
            this.$router.push("/");
            this.$router.go(0);
        },
    },
};
</script>

<style lang="scss" scoped>
.HomeNav {
    width: 1080px;
    max-width: 1080px;
    margin: 0 auto;
    height: 160px;
    // overflow: hidden;
    .leftImg {
        display: inline-block;
        width: 239px;
        height: 80px;
        padding-top: 30px;
        .block {
            width: 129px;
            height: 51px;
        }
    }
    .rightSearch {
        width: 464px;
        height: 70px;
        float: right;
        margin-top: 30px;
        .el-select .el-input {
            width: 130px;
        }
        .input-with-select .el-input-group__prepend {
            background-color: #fff;
        }
        .link {
            margin-top: 10px;
            .el-link {
                margin-right: 10px;
            }
        }
    }
    .tabNav {
        width: 100%;
        height: 60px;
        position: sticky;
        top: 10px;
        // position: fixed;
        left: 0;
        // top: 110px;
        box-shadow: 0 5px 5px 0px #a49b9b;
        overflow: hidden;
        .el-menu {
            width: 1080px;
            margin: 0 auto;
            // line-height: 50px;
            height: 40px;
            .el-menu-item {
                height: 40px;
                line-height: 40px;
                // border-bottom: none;
                font-size: 20px;
                font-weight: 600;
                a {
                    width: 80px;
                    height: 40px;
                    text-align: center;
                }
            }
        }
        .el-menu--horizontal {
            border-bottom: none;
        }
    }
}
a {
    text-decoration: none;
    display: inline-block;
}
</style>